<template>
  <div style="margin-bottom: 50px; overflow: hidden">
    <van-skeleton title :row="15" :loading="loading.isFirst">
    <div class="myflex weight topData" style="font-size: 13px">
      <div style="flex: 1; text-align: center">
        <div>订单量: {{data.data.orderCount}}</div>
        <div class="mtw">完成量: {{data.data.completeOrderCount}}</div>
      </div>
      <div style="flex: 1; text-align: center">
        <div>销售额: ￥{{data.data.sumMoney}}</div>
        <div class="mtw">成交额: ￥{{data.data.currSumMoney}}</div>
      </div>
    </div>
    <div class="VOrderContainer">
      <van-tabs
        color="red"
        class="VOrderIndex"
        v-model:active="active"
        @change="methods.onClickTab(value)"
      >
        <div class="my_divider mts"></div>
        <!-- 销售数据  start-->
        <van-tab title="销售数据" name="a">
          <div class="mlw">
            <div id="a_one"></div>

            <div id="a_two"></div>
          </div>
        </van-tab>
        <!-- 销售数据  end-->

        <!-- 商品销量  start-->
        <van-tab title="商品销量" name="b">
          
          <div style="display: flex;">
             
            <div>
              <div style=" border-right: 1px solid #ebedf0;overflow-y: scroll;min-height: 80.5vh;padding-bottom: 50px;box-sizing: border-box;">
            <van-sidebar
            v-model="activeb"
            style="
              --van-sidebar-selected-border-color: red;
              --van-sidebar-selected-border-height: 45px;
              padding: 5px;
             
            "
          >
          <van-sidebar-item
                v-for="item in shopData"
                :key="item.id"
                :title="item.name"
                :badge="item.goods.length"
              />
          </van-sidebar>
        </div>
          </div>



          <div class="" style="width: 100%; height: 100%">
            <div
                style="display: flex; font-size: 13px"
                class="pdbw my_divider mbs"
              >
                <div style="flex: 1; text-align: center">图片</div>
                <div style="flex: 1.5; text-align: center">名称</div>
                <div style="flex: 1; text-align: center">销量</div>
                <div style="flex: 1; text-align: center">销售额</div>
              </div>



              <div v-if="shopData[activeb]?.goods.length !== 0">
                <div style="overflow-y: scroll;max-height: 76.5vh;padding-bottom: 50px;box-sizing: border-box;">
                <div style="display: flex" class="my_divider pdbw pdtw" v-for="item in shopData[activeb]?.goods" :key="item.id">
                  <div style="flex: 1; text-align: center">
                    <img
                      :src="item.photo"
                      alt=""
                      width="50"
                      height="50"
                      style="border-radius: 5px"
                    />
                  </div>
                  <div
                    style="flex: 1.5; text-align: center; font-size: 14px"
                    class="weight"
                  >
                    {{ item.name.length>7?item.name.substring(0,7)+"...":item.name }}
                  </div>
                  <div style="flex: 1; text-align: center; font-size: 12px">
                    ×{{item.sales}}
                  </div>
                  <div style="flex: 1; text-align: center; font-size: 12px">
                    <span class="red weight">￥ {{ item.money }}</span>
                  </div>
                </div>
              </div>
              </div>

              <div v-if="shopData[activeb]?.goods.length === 0">
                <van-empty image-size="100" description="暂无数据" />
              </div>

                

          </div>


          </div>
          

        </van-tab>
        <!-- 商品销量  end-->

        <!-- 订单数据  start-->
        <van-tab title="订单数据" name="c">
          <van-cell
            title="选择日期区间"
            :value="date"
            @click="show = true"
            is-link
          />
          <van-calendar
            v-model:show="show"
            type="range"
            :min-date="data.minDate"
            :show-confirm="true"
            @confirm="methods.onConfirm"
          />

          <div class="mlw">
            <div id="b_one" class="mts"></div>
          </div>
        </van-tab>
        <!-- 订单数据  end-->

        <!-- 销售额  start-->
        <van-tab title="销售额" name="d">
          <!-- <van-cell
            title="选择日期区间"
            :value="date"
            @click="showb = true"
            is-link
          />
          <van-calendar
            v-model:show="show"
            type="range"
            :min-date="data.minDate"
            :show-confirm="true"
            @confirm="methods.onConfirm"
          /> -->

          <van-cell
            title="选择日期区间"
            :value="date"
            @click="show = true"
            is-link
          />
          <van-calendar
            v-model:show="show"
            type="range"
            :min-date="data.minDate"
            :show-confirm="true"
            @confirm="methods.onConfirm"
          />

          <div class="mlw">
            <div id="c_one" class="mts"></div>
          </div>
        </van-tab>
        <!-- 销售额  end-->
      </van-tabs>
    </div>
  </van-skeleton>
  </div>
</template>
    <script setup>
import { nextTick, onMounted, reactive, ref, watchEffect } from "vue";
import * as echarts from "echarts";
import { CheckLogin } from "@/api/login";
import { getOrderStatisticsByDate, getTypesAndGoods } from "@/api/sale";
import { loading } from "../dto/loadingDto";
import { showLoadingToast, showToast } from "vant";
const active = ref(0); //tabs横向切换
const activeb = ref(0); //商品销量 纵向切换
const date = ref(""); //订单数据日期
const dateb = ref(""); //销售额日期
const show = ref(false);
const showb = ref(false);
const shopData = ref([]); //所有商品
const data = reactive({
  name: "订单页面",
  status: 1,
  minDate: new Date(),
  minDateb: new Date(),
  data:{},
  begin:"",
  end:"",
});

const activeId = ref(1);

const activeIndex = ref(0);
const methods = {
  /**
   * 获取商品所有类别和商品
   */
  getTypesAndGoods:async()=>{
    const res=await getTypesAndGoods();
    if(res.result===0){
     shopData.value=res.data;
     console.log(shopData.value);
    }
  },
  /**
   * 选择日期后格式转换 订单数据
   */
  formatDate: (date) =>
    `${date.getFullYear()}-${date.getMonth() + 1}/${date.getDate()}`,
  /**
   * 选择日期后格式转换 销售额
   */
  formatDateb: (dateb) =>
    `${dateb.getFullYear()}/${dateb.getMonth() + 1}/${dateb.getDate()}`,
  /**
   * 选择日期弹框 订单数据
   */
  onConfirm: async(values) => {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    })
    const [start, end] = values;
    show.value = false;
    date.value = `${methods.formatDate(start)} - ${methods.formatDate(end)}`;
  
    data.begin=methods.formatDate(start);
    data.end=methods.formatDate(end);
   const res=await methods.getOrderStatisticsByDate(data.begin,data.end);

   if(res){
     if(active.value==="c"){
      nextTick(() => {
      methods.initChartc();
    });
     }else if(active.value==="d"){
      nextTick(() => {
        methods.initChartd();
      })
     }
   }
   
  },
  /**
   * 选择日期弹框 销售额
   */
  onConfirmb: (values) => {
    const [start, end] = values;
    showb.value = false;
    dateb.value = `${methods.formatDateb(start)} - ${methods.formatDateb(end)}`;
  },
  /**
   * 点击tabs事件
   */
  onClickTab: () => {
    if (active.value === "c") {
      nextTick(() => {
        methods.initChartc();
      });
    }
    if (active.value === "d") {
      nextTick(() => {
        methods.initChartd();
      });
    }
  },
  /**
   * 销售金额图表
   */
  initCharta: () => {
    var myChart = echarts.init(document.getElementById("a_one"));
    const seriesLabel = {
      show: false,
    };
    //成交额
   const  currMoneyValues= data.data.currMoneyValues?.values
    //日期
    const columns= data.data.moneyValues?.columns;
    //销售额
    const moneyValues= data.data.moneyValues?.values;
    var option = {
      title: {
        text: "近七日销售金额",
        textStyle: {
          //文字颜色
          color: "#ffa500",
          //字体风格,'normal','italic','oblique'
          fontStyle: "normal",
          //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
          fontWeight: "bold",
          //字体系列
          fontFamily: "sans-serif",
          //字体大小
          fontSize: 18,
        },
      },
      legend: {
        data: ["销售额", "成交额"],
        left: "55%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      dataset: {
        source: [
          // ["03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11"],
          // [0, 30.4, 65.1, 53.3, 57.9, 82, 53, 58],
          // [0, 30.4, 65.1, 53.3, 57.9, 82, 53, 58],
          columns,
          moneyValues,
          currMoneyValues
          
        ],
      },

      xAxis: [
        { type: "category", name: "日期" },
        // { type: "category", gridIndex: 1 },
      ],
      yAxis: [{ gridIndex: 0 }],
      // grid: [{ bottom: "55%" }],
      series: [
        {
          name: "销售额",
          type: "bar",
          seriesLayoutBy: "row",
          label: seriesLabel,
        },
        {
          name: "成交额",
          type: "bar",
          seriesLayoutBy: "row",
          label: seriesLabel,
        },
      ],
    };
    //用指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
  /**
   * 近7日订单数据图表
   */
  initChartb: () => {
    var myChart = echarts.init(document.getElementById("a_two"));
    const seriesLabel = {
      show: false,
    };
     //订单数
   const  orderCount= data.data.orderValues?.values
    //日期
    const columns= data.data.orderValues?.columns;
    //完成数
    const completeOrderCount= data.data.completeOrderValues?.values;
    var option = {
      title: {
        text: "近7日订单数据",
        textStyle: {
          //文字颜色
          color: "#ffa500",
          //字体风格,'normal','italic','oblique'
          fontStyle: "normal",
          //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
          fontWeight: "bold",
          //字体系列
          fontFamily: "sans-serif",
          //字体大小
          fontSize: 18,
        },
      },
      legend: {
        data: ["订单数", "完成数"],
        left: "50%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      dataset: {
        source: [
          // ["03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11"],
          // [0, 30.4, 65.1, 53.3, 57.9, 852, 523, 588],
          // [86.5, 92.1, 85.7, 83.1, 888, 874, 123, 654],
          columns,
          orderCount,
          completeOrderCount
        ],
      },

      xAxis: [
        { type: "category", name: "日期" },

        // { type: "category", gridIndex: 1 },
      ],
      yAxis: [{ gridIndex: 0 }],
      // grid: [{ bottom: "55%" }],
      series: [
        {
          name: "订单数",
          type: "bar",
          seriesLayoutBy: "row",
          label: seriesLabel,
        },
        {
          name: "完成数",
          type: "bar",
          seriesLayoutBy: "row",
          label: seriesLabel,
        },
      ],
    };
    //用指定的配置项和数据显示图表。
    myChart.setOption(option);
  },

  /**
   * 订单数据
   */
  initChartc: () => {
    var myChart = echarts.init(document.getElementById("b_one"));
    var option;

        //订单数
   const  orderCount= data.data.orderValues?.values
    //日期
    const columns= data.data.orderValues?.columns;
    //完成数
    const completeOrderCount= data.data.completeOrderValues?.values;
    option = {
      title: {
        text: "订单数据",
        textStyle: {
          color: "#ffa500",
        },
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: columns,
        data: ["订单数", "完成数"],
        left: "60%",
      },
      // grid: {
      //   left: '3%',
      //   right: '4%',
      //   bottom: '3%',
      //   containLabel: true
      // },
      toolbox: {
        // feature: {
        //   saveAsImage: {}
        // }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
       data:columns,
        // data: ["03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11"],
        name: "日期",
      },

      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "完成数",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          data: completeOrderCount,
        },
        {
          name: "订单数",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          data: orderCount,
        },
      ],
    };
    option && myChart.setOption(option);
  },
  /**
   * 销售数据
   */
  initChartd: () => {
    var myChart = echarts.init(document.getElementById("c_one"));
    var option;
    //成交额
    const  currMoneyValues= data.data.currMoneyValues?.values
    //日期
    const columns= data.data.moneyValues?.columns;
    //销售额
    const moneyValues= data.data.moneyValues?.values;
    option = {
      title: {
        text: "销售数据",
        textStyle: {
          color: "#ffa500",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data:columns,
        data: ["销售额", "成交额"],
        left: "60%",
      },
      toolbox: {
        // feature: {
        //   saveAsImage: {},
        // },
      },
      grid: {
        // left: "3%",
        // right: "4%",
        // bottom: "3%",
        // containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: columns,
          name: "日期",
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
      {
          name: "成交额",
          type: "line",
          stack: "Total",
          // areaStyle: {},
          label: {
            show: true,
            position: "top",
          },
          emphasis: {
            focus: "series",
          },
          data: currMoneyValues,
        },
        {
          name: "销售额",
          type: "line",
          stack: "Total",
          // areaStyle: {},
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            position: "top",
          },
          data: moneyValues,
        },
        
      ],
    };
    option && myChart.setOption(option);
  },
  
  getOrderStatisticsByDate:async (begin='',end='')=>{
  const res=await  getOrderStatisticsByDate({begin,end});
  data.data=res.data;
  loading.isFirst=false;
  nextTick(() => {
    //将图表操作放入nextTick中
    methods.initCharta();
    methods.initChartb();
    // methods.initChartc();
    // methods.initChartd();
  
  });
  return true;
  }
};

onMounted(() => {
  const min = new Date().getFullYear() - 1;
  data.minDate = new Date(min, 1, 1);
  methods.getOrderStatisticsByDate();
  methods.getTypesAndGoods();
});

watchEffect(() => {
  
});
</script>


<style scoped>
#a_one,
#a_two,
#b_one,
#c_one {
  width: 97.5vw;
  height: 220px;
  box-sizing: border-box;
}
/* .iconfont {
  font-size: 30px !important;
  position: absolute;
  right: -30%;
} */
div.van-sidebar.van-tree-select_nav {
  border: 1px solid #000 !important;
}
.topData {
  height: 60px;
  background: #faebd7;
}

.van-tree-select__nav{
   width: 10px !important;
}
</style>